<template>
  <div class="content">
    <div class="agricultureTitle">
      {{ data.title }}
    </div>
    <div class="bannerBox">
      <el-image
        v-if="data.image"
        :src="`/nongmao/nb-as/1.0.1/FileService/previewFile?fileId=${data.image}`"
        class="banner"
      >
        <div slot="error" class="imageError">加载失败</div>
      </el-image>
    </div>

    <template
      v-if="data.thematicFloorList && data.thematicFloorList.length > 0"
    >
      <el-card
        class="box-card"
        shadow="hover"
        v-for="(item, index) in data.thematicFloorList"
        :key="item.title"
      >
        <div slot="header">
          <span>{{ item.title }}</span>
        </div>

        <el-row :gutter="20">
          <el-col
            :span="12"
            v-for="(item2, index2) in item.thematicProduceList"
            :key="item2.farmProduceId"
            :padding="10"
            style="margin-bottom: 20px"
          >
            <div class="imageBox">
              <el-image
                :src="`/nongmao/nb-as/1.0.1/FileService/previewFile?fileId=${item2.image}`"
                class="image"
              >
              </el-image>
            </div>
            <div class="info">
              <span class="title">{{ item2.title }}</span>
              <div class="bottom clearfix">
                <div>{{ item2.providerName }}</div>
                <time class="price">￥{{ item2.price }}</time>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss">
.imageError {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background: #f5f7fa;
}
</style>
<style lang="scss" scoped>
.content {
  overflow: auto;
  height: 650px;
  padding-right: 20px;
  .agricultureTitle {
    margin-bottom: 10px;
    text-align: center;
    background-color: #f5f7fa;
    font-size: 20px;
  }

  .bannerBox {
    width: 100%;
    margin-bottom: 10px;
    .banner {
      width: 100%;
    }
  }
  .box-card {
    margin-bottom: 20px;
    .imageBox {
      text-align: center;
      background-color: #f5f7fa;
    }
    .info {
      padding: 10px;
      text-align: center;
      span {
        display: block;
        height: 70px;
      }
      .price {
        color: #ff0000;
        font-weight: bold;
      }
    }
  }
}
</style>
